<template>
  <div id="wangeditor" class="Editor">
    <div ref="editorElem" style="text-align:left;" />
  </div>
</template>
<style lang="scss">
  .w-e-toolbar .w-e-menu {
    position: relative;
    text-align: center;
    padding: 5px 5px;
    cursor: pointer;
  }
</style>
<script>
import E from 'wangeditor'
import PublicSev from '@/api/PublicSev'

let editor = null
export default {
  name: 'Editor',
  props: {
    value: String
  },
  watch: {
    value(newVal) {
      editor.txt.html(newVal)
    }
  },
  mounted() {
    editor = new E(this.$refs.editorElem)
    // 编辑器的事件，每次改变会获取其html内容
    editor.customConfig.onchange = html => {
      // 把这个'html'通过'editChange'的方法传入父组件
      this.handleChange(html)
    }
    // 上传图片
    editor.customConfig.uploadImgServer = PublicSev.eleUploadUrl()
    editor.customConfig.uploadFileName = 'upload' // 设置文件上传的参数名称
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024 // 将图片大小限制为 3M

    /* 自定义图片上传（支持跨域和非跨域上传，简单操作） */
    editor.customConfig.customUploadImg = async(files, insert) => {
      // eslint-disable-next-line no-
      //
      const { data } = await PublicSev.attacheUpload(files[0])
      const baseUrl = PublicSev.getRootUrl()
      const url = `${baseUrl}${data.url}`
      insert(url)
    }
    editor.customConfig.menus = [
      // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复
    ]
    editor.create() // 创建富文本实例
    editor.txt.html(this.value)
  },
  methods: {
    // 编辑框change处理事件
    handleChange(html) {
      this.$emit('change', html)
    }
  }
}
</script>
